<template>
  <div class="content">
    <div class="header">
      <navigation></navigation>
    </div>
    <div class="login">
      <div class="inAccount">
        <span><i class="el-icon-mobile-phone"></i></span>
        <input type="text" v-model="loginDto.username" placeholder="账号/手机/微信/QQ"/>
      </div>
      <br/>
      <div class="inPassword">
        <span><i class="el-icon-unlock"></i></span>
        <input type="password" v-model="loginDto.password" placeholder="密码"/>
      </div>
      <br/>
      <button @click="login()">登录</button>
      <button @click="bullet()">注册</button>
      <el-dialog :visible.sync="registerDisplay" class="bulletBox">
        <div class="registInput">
          <span><i class="el-icon-mobile-phone"></i></span>
          <input type="text" v-model="registerDto.account" id="registerAccount" placeholder="注册账号"/>
        </div>
        <br/>
        <div class="registInput">
          <span><i class="el-icon-unlock"></i></span>
          <input type="password" v-model="registerDto.password" placeholder="注册密码"/>
        </div>
        <br/>
        <div class="registInput">
          <span><i class="el-icon-unlock"></i></span>
          <input type="password" v-model="registerDto.ackPassword" placeholder="确认密码"/>
        </div>
        <br/>
        <button @click="register()">确认</button>
        <button @click="cancelRegister()">取消</button>
      </el-dialog>
    </div>
    <div class="navbot">
      <navBottom></navBottom>
    </div>
  </div>
</template>
<script>
import loginApi from "@/api/login";
import navigation from "@/components/Navigation.vue";
import navBottom from "@/components/NavBottom.vue"

export default {
  components: { navigation, navBottom},
  data() {
    return {
      registerDisplay:false,        //注册弹框显示参数
      loginDto: {                   //登录参数
        username: "",
        password: "",
      },
      registerDto: {                //注册参数
        account: "",
        password: "",
        ackPassword: "",
        roleId: 4,
        systemCode: ""
      }
    };
  },
  methods: {
    //登录
    login() {
      if(this.loginDto.username === '' || this.loginDto.password === ''){
         this.$message({
          showClose: true,
          message: '账号或密码为空,请补充完整',
          type: 'warning',
          center: true
        });
        return;
      }      
      loginApi.login(this.loginDto).then(response => {
        console.log(response);
        window.localStorage.setItem("access_token", response.data.data.access_token);
        window.localStorage.setItem("scope", response.data.data.scope);
        window.localStorage.setItem("user_id", response.data.data.user_id);
        window.localStorage.setItem("user_name", response.data.data.user_name);
        window.localStorage.setItem("role_id", response.data.data.role_id);
        window.localStorage.setItem("icon_url", response.data.data.icon_url);
        //切换到主页
        this.$router.push("/");            
        //登录成功之后刷新
        //window.location.reload();
      })
      .catch(error => {
        if (error.response) {
          const { data } = error.response;
          this.$message({
            showClose: true,
            message: data.data,
            type: 'warning',
            center: true
          });
        } else {
          this.$message({
            showClose: true,
            message: '网络错误:'+ error.message,
            type: 'warning',
            center: true
          });          
        } 
       });
    },
    //注册
    register() {
      if(this.registerDto.account === '' || this.registerDto.password === '' || this.registerDto.ackPassword === ''){
         this.$message({
          showClose: true,
          message: '注册信息不全，请补充完整',
          type: 'warning',
          center: true
        });
        return;
      }
      if(this.registerDto.password !== this.registerDto.ackPassword){
         this.$message({
          showClose: true,
          message: '两次密码不同，请重新添加',
          type: 'warning',
          center: true
        });
        return;
      }
      if(this.registerDto.password.length < 6 || this.registerDto.password.length > 16){
         this.$message({
          showClose: true,
          message: '密码规范6-12位',
          type: 'warning',
          center: true
        });
        return;
      }
      loginApi.register(this.registerDto).then(resopnse => {
        console.log(resopnse.data.data);
        this.registerDisplay = false;
      });
    },
    //注册界面显示
    bullet(){
      this.registerDisplay = true;
    },
    //注册界面关闭
    cancelRegister(){
      this.registerDisplay = false;
    }
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.content{
  background-image: url(../../assets/panda.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
input {
  margin: 10px auto;
  border: none;
  outline: none;
  padding: 5px;
}
input:-webkit-autofill {
  transition: background-color 5000s ease-in-out 0s;
}
button {
  width: 80px;
  padding: 5px;
  background-color: rgba(44,44,115,0.7);
  margin: 15px;
  color: #fff;
  font-family: KaiTi;
  font-size: 20px;
  border: none;
}
span {
  margin-left: -95px;
}
.header {
  width: 100%;
  height: 50px;
}
.inAccount {
  height: 40px;
  width: 30%;
  border: 1px solid royalblue;
  border-radius: 5px;
  margin: 40px auto 0;
}
.inPassword {
  height: 40px;
  width: 30%;
  border: 1px solid royalblue;
  border-radius: 5px;
  margin: 20px auto 0;
}
.login {
  background-color: white;
  box-shadow: 0 0 10px 10px rgb(175, 174, 174);
  margin: 10% auto;
  width: 55%;
  height: 260px;
  border: 1px solid rgb(231, 231, 231);
}
.navbot{
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: white;
}
.registInput{
  height: 40px;
  width: 35%;
  border: 1px solid royalblue;
  border-radius: 5px;
  margin: 20px auto 0;
}

</style>